<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Slider Carousel Template | PrepBootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<div class="page-header">
    <h1><img src="logo.jpg"></h1>
	<div align="right">
		<img src="NL.png"> / <img src="EN.png">
	</div>
</div>

<!-- Slider Carousel - START -->
<div class="container">
    <div id="carousel1" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img alt="" src="http://placehold.it/1200x400/8CC63E/ffffff&text=myHealth">
                <div class="carousel-caption">
                    <h3>Is er voor u.</h3>
                    <p>
                        En blijft ook van u.
                    </p>
                </div>
            </div>
            <div class="item">
                <img alt="" src="http://placehold.it/1200x400/4f77cb/ffffff&text=Participeren">
                <div class="carousel-caption">
                      <h3>Kunt u ook.</h3>
                    <p>
                       myHealth werkt door de samenwerking tussen u en uw zorgcontacten. 
                    </p>
				   
                </div>
            </div>
            <div class="item">
                <img alt="Bootstrap template" src="http://placehold.it/1200x400/F68937/ffffff&text=Gemakkelijk.">
                <div class="carousel-caption">
                    <h3>Altijd overzicht</h3>
                    <p>
                       Waar u ook bent, vanaf uw eigen tablet, smartphone of PC.
                    </p>
                </div>
            </div>
        </div>
        <ul class="nav nav-pills nav-justified">
            <li data-target="#carousel1" data-slide-to="0" class="active">
                <a href="#">myHealth<small>Uw persoonlijke ingang in de zorg</small></a>
            </li>
            <li data-target="#carousel1" data-slide-to="1">
                <a href="#">Participatie<small>Samen zorgen we voor de beste zorg</small></a>
            </li>
            <li data-target="#carousel1" data-slide-to="2">
				 <a href="#">Gemakkelijk<small>En wij zullen dit ook blijven.</small></a>
            </li>
        </ul>
    </div>
</div>
<div class="container">

    <hr class="hrcustom" />
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Welkom<span class="fa pull-right medium"></span></h3>
                </div>
                <div class="panel-body">
                    Met myHealth kunt u zelf veel van uw zorg inzien en bent u minder vaak bezig met het bellen van organisaties 
                    quis lobortis est nulla nec ligula. Aenean cursus enim sit amet tortor rutrum lobortis. 
                    Vestibulum mattis mauris fringilla mauris volutpat, in euismod arcu ultricies. 
                    Nunc eget hendrerit lectus. Proin rutrum elit ut orci fringilla, sit amet ornare turpis molestie. 
                    Proin nec neque eget nulla scelerisque rhoncus sit amet vitae augue. 
                    Vivamus ipsum eros, sodales sed enim ac, malesuada iaculis mi. 
                    Morbi ut orci sit amet tellus posuere convallis. 
                    Cras rhoncus tincidunt ultrices.
                </div>
            </div>
        </div>      
    </div>
    <div class="row">
        <div class="col-lg-8 col-md-8 text-center">
            <img src="http://placehold.it/600x150" class="customimage">
        </div>
        <div class="col-lg-4 col-md-4">
            <div class="panel panel-primary">
                <div class="panel-body text-center big">
                    <span class="fa"></span>
                    <span class="big"><font color="8CC63E">Log in</font></span>
                </div>
            </div>
        </div>
    </div>

    <hr class="hrcustom" />
</div>

<style>
    .big {
        font-size: 37px;
        color: #5CB85C;
    }

    .medium {
        font-size: 23px;
    }

    .hrcustom {
        padding: 30px;
    }

    .customimage {
        width:100%;
        height:100%;
    }
</style>


<link rel="stylesheet" type="text/css" href="/Content/font-awesome/css/font-awesome.min.css" />

<style>
body {
    padding-top: 20px;
}
#carousel1 .nav a small {
    display: block;
}
#carousel1 .nav {
    background: #eee;
}
.nav-justified > li > a {
    border-radius: 0px;
}
.nav-pills > li[data-slide-to="0"].active a {
    background-color: #8CC63E;
}
.nav-pills > li[data-slide-to="1"].active a {
    background-color: #4f77cb;
}
.nav-pills > li[data-slide-to="2"].active a {
    background-color: #f68937;
}
</style>

<script type="text/javascript">
    jQuery(function ($) {
        $('#carousel1').carousel({
            interval: 4000
        });

        var clickEvent = false;

        $('#carousel1').on('click', '.nav a', function () {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');
        }).on('slid.bs.carousel', function (e) {
            if (!clickEvent) {
                var count = $('.nav').children().length - 1;
                var current = $('.nav li.active');
                current.removeClass('active').next().addClass('active');
                var id = parseInt(current.data('slide-to'));
                if (count == id) {
                    $('.nav li').first().addClass('active');
                }
            }
            clickEvent = false;
        });
    });
</script>
<!-- Slider Carousel - END -->

</div>

</body>
</html>